<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            1、Promise 有几种状态--pengding，-resolved -reject
            2、Prmise的状态是否可变--不可变
            3、Prmise 如何解决地狱回调-- then 里面可以 return Promise
            4、Promise 有哪些方法，应用场景--all,race
            5、如何让Promise 顺序执行(async/await)

        */ 
        //1、
        const promise1 = new Promise((resolve,reject)=>{
            // 因为这里面执行就没有值，就pengding了
        }) // pengding

        const promise2 = new Promise((resolve,reject)=>resolve(123)) // resolved

        const promise3 = new Promise((resolve,reject)=>reject('456')) // reject

        console.log(promise1,'promise1');
        console.log(promise2,'promise2');
        console.log(promise3,'promise3');
        
        promise2.then(v =>{ // then 拿 resolve
            console.log('then');
            console.log('v',v);
        })

        promise3.catch(v =>{ // catch 拿 reject
            console.log('catch');
            console.log('val',v);
        })

        /*
            3、解释下回调地狱
            
        */ 
        // var xmlhttp = new XMLHttpRequest()
        // xmlhttp.onreadystatechange = state_Change;
        // xmlhttp.open('GET','baidu.com', true) // 默认是异步
        // xmlhttp.send(null)

        // function state_Change(){
        //     if(xmlhttp.readyState == 4){
        //         if(xmlhttp.readyState == 200){
        //             // do something  做业务逻辑
        //         }
        //     } else {
        //         alert('Problem retrieving XML data')
        //     }
        // }


        // var xmlhttp = new XMLHttpRequest()
        // xmlhttp.onreadystatechange = state_Change;
        // xmlhttp.open('GET','baidu.com', true) // 默认是异步
        // xmlhttp.send(null)

        // function state_Change(){
        //     if(xmlhttp.readyState == 4){
        //         if(xmlhttp.readyState == 200){
        //             // do something  做业务逻辑
        //             var xmlhttp = new XMLHttpRequest()
        //             xmlhttp.onreadystatechange = state_Change;
        //             xmlhttp.open('GET','baidu.com', true) // 默认是异步
        //             xmlhttp.send(null)

        //             function state_Change(){
        //                 if(xmlhttp.readyState == 4){
        //                     if(xmlhttp.readyState == 200){
        //                         // do something  做业务逻辑

        //                         var xmlhttp = new XMLHttpRequest()
        //                         xmlhttp.onreadystatechange = state_Change;
        //                         xmlhttp.open('GET','baidu.com', true) // 默认是异步
        //                         xmlhttp.send(null)

        //                         function state_Change(){
        //                             if(xmlhttp.readyState == 4){
        //                                 if(xmlhttp.readyState == 200){
        //                                     // do something  做业务逻辑
        //                                 }
        //                             } else {
        //                                 alert('Problem retrieving XML data')
        //                             }
        //                         }
        //                     }
        //                 } else {
        //                     alert('Problem retrieving XML data')
        //                 }
        //             }
        //         }
        //     } else {
        //         alert('Problem retrieving XML data')
        //     }
        // }


        // 如果多个请求之间有依赖关系，那么就有嵌套，看起来就很乱，阅读性比较差

        // 这是 解决办法
        function request1(){
            return new Promise(resolve => resolve(11))
        }
        function request2(){
            return new Promise(resolve => resolve(22))
        }
        function request3(){
            return new Promise(resolve => resolve(33))
        }

        request1().then(v => {
            console.log('第一层then');
            console.log('v1',v);
            return request2()
        }).then(v=>{
            console.log('第二层then');
            console.log('v2',v);
            return request3()
        }).then(v=>{
            console.log('第三层then');
            console.log('v3',v);
        })

        // 这样上面的代码多层请求嵌套就很优雅

        // 注意很多人会写成下面的代码--这和回调地狱有点像
        request1().then(v => {
            console.log('第一层then');
            console.log('v1',v);
            request2().then(v=>{
                console.log('第二层then');
                console.log('v2',v);
                request3().then(v=>{
                    console.log('第三层then');
                    console.log('v3',v);
                })
            })
        })

        // 4、- all
        const promise4 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('1')
            },3000)
        })
        const promise5 = new Promise((resolve) =>{
            setTimeout(()=>{
                resolve('2')
            },2000)
        })
        const promise6 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('3')
            },1000)
        })

        // Promise.all接受的是一个数组
        Promise.all([promise4,promise5,promise6]).then(v=>{
            console.log('then');
            console.log('vv',v); // ['1','2','3']
        }).catch(v=>{
            console.log('catch');
            console.log('vv',v);
        })


        const promise7 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('11')
            },3000)
        })
        const promise8 = new Promise((resolve,reject) =>{
            setTimeout(()=>{
                reject('22')
            },2000)
        })
        const promise9 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('33')
            },1000)
        })

        // Promise.all接受的是一个数组
        Promise.all([promise7,promise8,promise9]).then(v=>{
            console.log('then');
            console.log('vv',v); // 没走这里
        }).catch(v=>{
            console.log('catch'); // ['2']
            console.log('vv',v);
        })

        // -- race，场景网络请求慢于两秒,就提示网络请求不佳
        const promise10 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('1')
            },3000)
        })
        const promise11 = new Promise((resolve) =>{
            setTimeout(()=>{
                resolve('2')
            },2000)
        })
        const promise12 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('3')
            },1000)
        })

        // Promise.all接受的是一个数组--谁最快就抛出谁
        Promise.race([promise10,promise11,promise12]).then(v=>{
            console.log('then');
            console.log('vvv',v); // 3
        }).catch(v=>{
            console.log('catch');
            console.log('vvv',v);
        })


        // 5 async await 顺序执行
        const promise13 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('111')
            },3000)
        })
        const promise14 = new Promise((resolve) =>{
            setTimeout(()=>{
                resolve('222')
            },2000)
        })
        const promise15 = new Promise(resolve =>{
            setTimeout(()=>{
                resolve('333')
            },1000)
        })
        async function excute() {
            await promise13.then(v => console.log('13',v))
            await promise14.then(v => console.log('14',v))
            await promise15.then(v => console.log('15',v))
        }
        excute()
    </script>
</body>
</html>